<template>
  <div class="contain">
    <img src="../../assets/images/index.png" class="imgsize1" alt="" />
    <div class="content-padding">
      <div class="from">
        <input
          type="number"
          class="input-sty"
          v-model="phone"
          placeholder="请输入湖南移动手机号码"
        />
        <div class="ct">
          <input
            type="number"
            v-model="yzm"
            class="input-sty posi"
            placeholder="请输入短信验证码"
          />
          <div class="left" @click="getYzm">{{ yzmText }}</div>
        </div>
        <div class="btn" @click="buy">
          <img src="../../assets/images/btn.png" class="imgsize2" alt="" />
        </div>
      </div>
      <div class="content">
        <div class="model1 flex-colum">
          <img src="../../assets/images/yhj.png" class="sty" alt="" />
          <div class="img-title">
            <img src="../../assets/images/ywsm.png" class="imgsize3" alt="" />
          </div>
          <div class="pre">
            <p>1.产品资费:12元／月。</p>
            <p>
              2.生效规则：订购立即生效（订购当日一次性扣除，续订月按自然月份，在每月初进行扣费），退订次月失效。本产品为湖南移动客户专享，在订购时请保证电话畅通不欠费。
            </p>
            <p>
              3.产品内容：本联名会员为连续包月产品，含3GB全国通用流量和随e加优享会员月包权益。
            </p>
            <p>4.权益领取说明：</p>
            <p>
              (1)在前12个月办理期间，随e加优享会员月包权益将由系统自动下发，12个月后，客户需要每月登录权益专区页面主动领取。领取资格自会员生效后第13个月开始获得，每月1次，当月有效，不结转。
            </p>
            <p>(2)权益领取入口:登录“中国移动APP—我的—移动甄选”领取。</p>
            <p>
              5.退订路径：如需退订可通过请拨打客服热线10086或咨询当地移动营业厅。
            </p>
            <p>6.上述会员权益内容覆盖均不含中国港澳台地区。</p>
          </div>
        </div>
        <div class="model2 flex-colum">
          <div class="img-title">
            <img src="../../assets/images/xhdl.png" class="imgsize4" alt="" />
          </div>
          <div class="pre">
            <p>1.产品权益内容</p>
            <p>会员每月可享权益：</p>
            <p>
              (1)权益场景3选1：①【加油场景】价值20元的汽油通用券礼包：满200-10*1张，满200-5*2张（适用于中石化和中石油，任选其一）；②【充电场景】价值20元的充电服务券包：2张10元的充电服务费代金券（特来电）；③【停车场景】价值20元的捷停车券包：2张10元的停车代金券。以上场景任选其一。
            </p>
            <p>(2)1次全自动洗车服务</p>
            <p>(3)1张20元精洗优惠券</p>
            <p>2.权益生效规则</p>
            <p>
              用户订购成功后，权益下发至用户订购手机号码绑定的账户内，若未绑定账户则默认使用订购手机号码建立“随e加”微信小程序账户，使用订购手机号登录“随e加”微信小程序即可查看使用权益。
            </p>
            <p>3.产品使用说明</p>
            <p>
              用户订购成功后，使用订购手机号登录“随e加”微信小程序，在“我的—优惠券”查看。
            </p>
            <p>(1)中国石化加油券</p>
            <p>
              用户登录“随e加”微信小程序，进入“我的—优惠券”页面，选择中石化加油券并点击立即兑换，输入会员号码完成充值。兑换成功后，在微信搜索“易捷加油”小程序，使用订购会员手机号登录，进入“电子券专区”选择“全国电子券”，即可查看已到账的加油优惠券。加完油后，选择需充值的面额，支付时选择该优惠券即可直接抵扣优惠。券的有效期为30天。
            </p>
            <p>(2)中国石油加油券</p>
            <p>
              用户登录“随e加”微信小程序，进入“我的—优惠券”页面，选择中石油加油券并点击立即兑换，输入会员号码完成充值。打开支付宝APP，进入「卡包」查看已同步的银行立减金权益。在支付宝搜索「中油好客e站」小程序，选择「油卡充值」→「钱包」→「充值」，支付时系统将自动抵扣优惠。券的有效期为30天。
            </p>
            <p>(3)特来电-充电优惠券</p>
            <p>
              用户登录“随e加”微信小程序，进入“我的—优惠券”页面，选择特来电充电优惠券并点击立即兑换并复制券码，随后打开特来电微信小程序，通过“卡券”功能输入券码完成绑定。绑定成功后，用户可在“我的”页面查看已到账的充电券，选择可用充电站进行扫码充电，支付时系统将自动抵扣优惠金额。券的有效期为30天。
            </p>
            <p>(4)捷停车－停车优惠券</p>
            <p>
              用户登录“随e加”微信小程序，进入“我的—优惠券”页面，选择捷停停车优惠券并点击立即兑换，兑换成功后点击“去使用”，系统将自动跳转至捷停车小程序；用户可在“我的－优惠券”中确认优惠券到账情况，通过“车牌缴费”功能完成停车费支付时即可自动抵扣优惠金额。券的有效期为30天。
            </p>
            <p>(5)全自动洗车</p>
            <p>
              用户登录“随e加”微信小程序，进入“我的—优惠券”页面，选择全自动洗车优惠券并点击立即兑换，兑换成功后搜索“洗车助手”小程序，用户可在“我的－洗车服务”，查看自动洗车券到账情况。用户抵达自助洗车网点后，扫描网点二维码，按平台操作提示洗车即可，洗完后选择蚂蚁快兑券即可抵扣优惠。券的有效期为30天。
            </p>
            <p>(6)精洗优惠券</p>
            <p>
              用户登录“随e加”微信小程序，进入“我的—优惠券”页面，选择“精洗券”点击立即兑换，页面自动跳转至精致洗车购买页面，选择适用门店，购买精洗服务时可直接抵扣20元。到店后直接出示系统下发的核销码即可享受精洗服务。券的有效期为30天。
            </p>
            <p>4.权益有效时间核算</p>
            <p>
              生效日起30天，例如：1月1日00:00生效的资源，有效期至1月30日24:00。
            </p>
            <p>5.客服电话</p>
            <p>4001086628（服务时间为8:30-22:00，节假日无休）。</p>
          </div>
        </div>
      </div>
      <DialogSb
        :visible="dialogVisible"
        @update:visible="closeDialog"
        title="My Dialog"
      >
        <div class="img">
          <img src="../../assets/images/error.png" class="imgsize1-1" alt="" />
        </div>
      </DialogSb>
      <DialogSb
        :visible="dialogVisibleSuess"
        @update:visible="closeDialog"
        title="My Dialog"
      >
        <div class="img">
          <img
            src="../../assets/images/success.png"
            class="imgsize1-1"
            alt=""
          />
        </div>
      </DialogSb>
      <DialogSb
        :visible="dialogVisibleConfig"
        @update:visible="closeDialog"
        title="My Dialog"
      >
        <div class="img posi-model">
          <img src="../../assets/images/config.png" class="imgsize1-3" alt="" />
          <div class="btn-box">
            <img
              @click="closeDialog"
              src="../../assets/images/left.png"
              class="imgsize1-4"
              alt=""
            />
            <img
              @click="configBuy"
              src="../../assets/images/right.png"
              class="imgsize1-4"
              alt=""
            />
          </div>
        </div>
      </DialogSb>
      <div class="loading-box" v-if="isLoading">
        <van-loading type="spinner" size="28px" vertical>加载中...</van-loading>
      </div>
    </div>
    <div class="zgyd-img">
      <img src="../../assets/images/zgyd.png" class="imgsize7" alt="" />
    </div>
  </div>
</template>
<script>
import { sendSmsYzm, openBiz } from "@/api/user.js";
import DialogSb from "@/components/DialogView.vue";
import { Dialog } from "vant";
export default {
  name: "XhdlView",
  data() {
    return {
      isLoading: false,
      phone: "",
      yzm: "",
      countdown: 60,
      //订单号
      orderSn: "",
      yzmText: "获取验证码",
      errormessage: "手机号码错误",
      dialogVisible: false,
      dialogVisibleSuess: false,
      dialogVisibleConfig: false,
    };
  },
  components: {
    DialogSb,
  },
  computed: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    buy() {
      var phone = this.phone;
      var errorMessage = this.validatePhoneNumber(phone);
      //如果有错误消息没有通过表单验证不发
      if (errorMessage) {
        this.$toast({
          message: errorMessage,
          duration: 2000,
        });
        return;
      }
      if (!this.yzm) {
        this.$toast({
          message: "请输入验证码",
          duration: 2000,
        });
        return false;
      }
      this.dialogVisibleConfig = true;
    },
    configBuy() {
      var time = this.getCurrentDateTime();
      var sign = "04da160dc4f445b48f11dfdcff451220";
      var code = sign + this.phone + time + this.orderSn + this.yzm + sign;
      var encry = this.$md5(code);
      var reqData = {
        userKey: "H5_TL",
        phone: this.phone,
        timestamp: time,
        sign: encry,
        orderSn: this.orderSn,
        smsCode: this.yzm,
      };
      this.isLoading = true;
      openBiz(reqData)
        .then((res) => {
          this.isLoading = false;
          if (res.data.state === 1) {
            //如果等于0就清除数据
            this.initData();
            this.dialogVisibleConfig = false;
            this.dialogVisibleSuess = true;
          }
          if (res.data.state === -1) {
            this.dialogVisibleConfig = false;
            this.dialogVisible = true;
          }
          if (res.data.state === 2) {
            this.dialogVisibleConfig = false;
            Dialog.alert({
              title: "温馨提示",
              message: res.data.message,
            }).then(() => {});
          }
        })
        .catch(() => {
          this.dialogVisibleConfig = false;
          this.isLoading = false;
          this.dialogVisible = true;
        });
    },
    initData() {
      (this.phone = ""), (this.yzm = "");
    },
    djs() {
      // 如果倒计时还未结束，则不执行任何操作
      if (this.countdown !== 60) {
        return;
      }
      // 设置倒计时文本为六十秒
      this.yzmText = "60秒后重新获取";
      // 启动定时器，每秒更新倒计时文本，直到倒计时结束
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
          this.yzmText = `${this.countdown}秒后重新获取`;
        } else {
          clearInterval(timer);
          this.yzmText = "获取验证码";
          this.countdown = 60; // 重置倒计时
        }
      }, 1000);
    },
    validatePhoneNumber(phone) {
      // 判断手机号是否为空
      if (!phone) {
        return "请输入手机号码";
      }
      // 判断手机号是否为数字且长度是否为11位
      if (!/^\d{11}$/.test(phone)) {
        return "手机号码必须为11位数字";
      }

      // 手机号验证通过
      return null;
    },
    getYzm() {
      //如果处于倒计时就不发
      if (this.countdown !== 60) {
        return;
      }
      var phone = this.phone;
      var errorMessage = this.validatePhoneNumber(phone);
      //如果有错误消息没有通过表单验证不发
      if (errorMessage) {
        this.$toast({
          message: errorMessage,
          duration: 2000,
        });
        return;
      }
      var time = this.getCurrentDateTime();
      var sign = "04da160dc4f445b48f11dfdcff451220";
      var code = sign + phone + time + sign;
      var encry = this.$md5(code);
      var reqData = {
        userKey: "H5_TL",
        phone: phone,
        timestamp: time,
        sign: encry,
      };
      this.isLoading = true;
      sendSmsYzm(reqData)
        .then((res) => {
          this.isLoading = false;
          if (res.data.state === -1) {
            Dialog.alert({
              title: "温馨提示",
              message: res.data.message,
            }).then(() => {});
          } else {
            this.djs();
            this.$toast({
              message: res.data.message,
              duration: 2000,
            });
            this.orderSn = res.data.data;
          }
        })
        .catch((error) => {
          // 处理超时或其他错误情况
          this.isLoading = false;
          console.error("请求发送短信验证码出错：", error);
          this.$toast({
            message: "请求发送短信验证码出错，请稍后重试",
            duration: 2000,
          });
        });
    },
    closeDialog() {
      this.dialogVisible = false; // 关闭对话框
      this.dialogVisibleSuess = false; // 关闭对话框
      this.dialogVisibleConfig = false; // 关闭对话框
    },
    showDialog() {
      this.dialogVisible = true;
    },
    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${year}${month}${day}${hours}${minutes}${seconds}`;
    },
  },
};
</script>

<style lang="less" scoped>
.from {
  position: relative;
  z-index: 0;
  margin-top: -210px;
}
.contain {
  width: 100%;
  min-height: 100vh;
}
.img-title {
  margin-top: 18px;
}
.imgsize4 {
  width: 257px;
  height: 31px;
  margin-bottom: 15px;
}
.imgsize1 {
  width: 100%;
  height: 749px;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 19px;
}
.imgsize3 {
  width: 257px;
  height: 31px;
  margin-bottom: 15px;
}
.imgsize2 {
  width: 240px;
  height: 47px;
}
.content-padding {
  margin-top: -2px;
  padding: 19px 16px 36px 16px;
  box-sizing: border-box;
  background: linear-gradient(178deg, #f19e27, #f2a231, #ffb148, #fbedcc);
}
.input-sty {
  border-radius: 25px;
  width: 100%;
  height: 44px;
  border: none;
  background-color: #fff;
  /* 重置默认的背景颜色 */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  /* 取消默认的内边距 */
  padding: 0;
  /* 取消默认的外边距 */
  margin: 0;
  /* 去除默认的外边框 */
  outline: none;
  text-indent: 0.5rem;
  font-size: 17px !important;
}
.input-sty::placeholder {
  font-size: 17px !important;
  color: #999; /* 设置为灰色 */
}
.posi {
  position: absolute;
  right: 0;
  top: 0;
}
.ct {
  margin-top: 13px;
  position: relative;
  height: 44px !important;
  .left {
    position: absolute;
    right: 0;
    top: 0;
    width: 144px;
    height: 44px;
    background: #fe6723;
    border-radius: 0px 22px 22px 0px;
    font-weight: 400;
    font-size: 17px;
    color: #ffffff;
    text-align: center;
    line-height: 44px;
  }
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  .pre {
    font-weight: 400;
    font-size: 12px;
    color: #fe6723;
    line-height: 22px;
  }
}
.imgsize1-1 {
  width: 292px;
  height: 196px;
}
.imgsize1-3 {
  width: 292px;
  height: 281px;
}
.imgsize1-4 {
  width: 257px;
  height: 31px;
  margin-bottom: 15px;
}
.posi-model {
  position: relative;
  .btn-box {
    width: 262px;
    position: absolute;
    right: 15px;
    bottom: 30px;
    display: flex;
    height: 60px;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
    justify-content: space-between;
  }
}
.loading-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}
.imgsize7 {
  width: 100%;
}
.model1 {
  align-items: center;
  position: relative;
  width: 360px;
  margin-top: 26px;
  height: 417px;
  padding: 0 16px;
  background-image: url(../../assets/images/model1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.sty {
  position: absolute;
  width: 54px;
  height: 48px;
  right: 0;
  top: -20px;
}
.model2 {
  align-items: center;
  position: relative;
  width: 360px;
  height: 1483px;
  margin-top: 26px;
  padding: 0 16px;
  background-image: url(../../assets/images/model.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
</style>
